<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleOk"
    okText="打印"
    width="900px"
    title="申请回执单"
  >
    <a-form-model ref="form" hideRequiredMark :model="form" layout="inline" :colon="false">
      <div id="print" class="p-16">
        <table class="perpage" style="width: 100%" v-for="index in 2" :key="index">
          <thead>
            <tr>
              <th colspan="6">NO：{{ data.ApplyNo }}</th>
            </tr>
            <tr>
              <th colspan="6" class="title text-center">贵阳市公共租赁住房申请回执单</th>
            </tr>
            <tr>
              <td colspan="6">
                <a-form-model-item label="申请人姓名：" prop="Proposer">
                  <a-input v-model="form.Proposer"></a-input>
                </a-form-model-item>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <a-form-model-item prop="TownshipName">
                  <a-input v-model="form.TownshipName"></a-input>
                </a-form-model-item>
                <span class="p-l-16">社区（乡镇）</span>
              </td>
              <td colspan="2">
                <a-form-model-item prop="neighborhoodCommittee">
                  <a-input v-model="form.neighborhoodCommittee"></a-input>
                </a-form-model-item>
                <span class="p-l-16">居委会</span>
              </td>
              <td colspan="2">
                <a-form-model-item label="编号：">
                  <a-input v-model="data.ApplyNo" disabled></a-input>
                </a-form-model-item>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="4">1.公共租赁住房申请审核表</td>
              <td>
                （
                <a-form-model-item prop="formNum">
                  <a-input v-model="form.formNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="formPage">
                  <a-input v-model="form.formPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">2.家庭成员身份证（复印件）</td>
              <td>
                （
                <a-form-model-item prop="idCardNum">
                  <a-input v-model="form.idCardNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="idCardPage">
                  <a-input v-model="form.idCardPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">3.户口簿（复印件）</td>
              <td>
                （
                <a-form-model-item prop="residenceBookletNum">
                  <a-input v-model="form.residenceBookletNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="residenceBookletPage">
                  <a-input v-model="form.residenceBookletPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">4.低保领取证（复印件）/贵阳市城市低收入家庭认定证（原件）</td>
              <td>
                （
                <a-form-model-item prop="allowancesNum">
                  <a-input v-model="form.allowancesNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="allowancesPage">
                  <a-input v-model="form.allowancesPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">5.结婚证（复印件）</td>
              <td>
                （
                <a-form-model-item prop="marriageNum">
                  <a-input v-model="form.marriageNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="marriagePage">
                  <a-input v-model="form.marriagePage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">6.离婚证（复印件）</td>
              <td>
                （
                <a-form-model-item prop="divorceNum">
                  <a-input v-model="form.divorceNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="divorcePage">
                  <a-input v-model="form.divorcePage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="6">7.应测算人员现住房情况证明</td>
            </tr>
            <tr>
              <td colspan="4">（1）房屋所有权证明（复印件）</td>
              <td>
                （
                <a-form-model-item prop="ownershipNum">
                  <a-input v-model="form.ownershipNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="ownershipPage">
                  <a-input v-model="form.ownershipPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">（2）承租私房《房屋租赁合同》（复印件）</td>
              <td>
                （
                <a-form-model-item prop="leaseOwnerNum">
                  <a-input v-model="form.leaseOwnerNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="leaseOwnerPage">
                  <a-input v-model="form.leaseOwnerPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">（3）承租公房相关证明</td>
              <td>
                （
                <a-form-model-item prop="leasePublicNum">
                  <a-input v-model="form.leasePublicNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="leasePublicPage">
                  <a-input v-model="form.leasePublicPage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">（4）社区服务中心/乡/镇关于借住或暂住的证明</td>
              <td>
                （
                <a-form-model-item prop="communityProveNum">
                  <a-input v-model="form.communityProveNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="communityProvePage">
                  <a-input v-model="form.communityProvePage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">（5）其他证明（离婚协议、房产分割协议的复印件、空挂户证明等）</td>
              <td>
                （
                <a-form-model-item prop="otherProveNum">
                  <a-input v-model="form.otherProveNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="otherProvePage">
                  <a-input v-model="form.otherProvePage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="6">8.其他</td>
            </tr>
            <tr>
              <td colspan="4">（1）民政部门有关证明（残疾证、优抚证复印件等）</td>
              <td>
                （
                <a-form-model-item prop="civilProveNum">
                  <a-input v-model="form.civilProveNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="civilProvePage">
                  <a-input v-model="form.civilProvePage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">（2）有关法律文件（公证书、监护人证明复印件、授权委托书等）</td>
              <td>
                （
                <a-form-model-item prop="lawFileNum">
                  <a-input v-model="form.lawFileNum" class="small-input"></a-input>
                </a-form-model-item>
                ）件
              </td>
              <td>
                共（
                <a-form-model-item prop="lawFilePage">
                  <a-input v-model="form.lawFilePage" class="small-input"></a-input>
                </a-form-model-item>
                ）页
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <a-form-model-item label="收件人：" prop="addressee">
                  <a-input disabled v-model="form.addressee"></a-input>
                </a-form-model-item>
              </td>
              <td colspan="2">
                <a-form-model-item label="日期：" prop="date">
                  <a-input disabled v-model="form.date"></a-input>
                </a-form-model-item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </a-form-model>
  </a-modal>
</template>

<script>
import print from 'print-js'
import 'print-js/dist/print.css'
import moment from 'moment'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      form: {
        neighborhoodCommittee: '',
        TownshipName: '',
        Proposer: '',
        date: moment().format('YYYY-MM-DD'),
        addressee: this.$store.getters.nickname,
        formNum: '',
        formPage: '',
        idCardNum: '',
        idCardPage: '',
        residenceBookletNum: '',
        residenceBookletPage: '',
        allowancesNum: '',
        allowancesPage: '',
        marriageNum: '',
        marriagePage: '',
        divorceNum: '',
        divorcePage: '',
        ownershipNum: '',
        ownershipPage: '',
        leaseOwnerNum: '',
        leaseOwnerPage: '',
        leasePublicNum: '',
        leasePublicPage: '',
        communityProveNum: '',
        communityProvePage: '',
        otherProveNum: '',
        otherProvePage: '',
        civilProveNum: '',
        civilProvePage: '',
        lawFileNum: '',
        lawFilePage: ''
      }
    }
  },
  methods: {
    fetchData () {
      this.form.Proposer = this.data.Proposer
      this.form.TownshipName = this.data.TownshipName
    },
    close () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.$refs.form.resetFields()
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      print({
        printable: 'print',
        type: 'html',
        maxWidth: 900,
        targetStyles: ['*'] // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
.title {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
.small-input {
  width: 40px !important;
  display: inline-block;
  border-bottom: none !important;
  text-align: center;
  &:focus {
    border-bottom: 1px solid rgba(0, 0, 0, 0.85) !important;
  }
}
.form-item {
  /deep/ .ant-form-item-control {
    text-align: center;
  }
}
/deep/ .ant-form-item {
  margin-bottom: 0;
  vertical-align: middle;
  margin-right: 0;
}
/deep/ .ant-input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.85);
  width: 190px;
  height: 20px;
  &:focus {
    box-shadow: none;
  }
  &[disabled] {
    color: inherit;
    background-color: #fff;
    &:hover {
      border-color: inherit;
    }
  }
}
.perpage {
  page-break-after: always;
  &:last-child {
    margin-top: 24px;
  }
}
</style>
